import React, { useContext } from 'react'
import { Space, Select, Input, Button, Cascader } from 'antd'
import IconSvg from '@/components/IconSvg'
import style from './style.module.less'
import { hospitalAdminUserContext } from '../../../context'
import BottomTable from '../bottom/index'

export default () => {
  const { cityTopConfig, topConfigData, inpatientWardTopConfig } = useContext(hospitalAdminUserContext)
  return (
    <div className={style.hospitalComponentBox}>
      <div className={style.top}>
        <Space>
          <Space>
            <Cascader
              style={{ width: 200 }}
              options={topConfigData.topRegionSelectData}
              expandTrigger='hover'
              placeholder='请选择地区'
              onChange={cityTopConfig.getAreaSelectValue}
            />

            <Cascader
              style={{ width: 200 }}
              options={topConfigData.inpatientWard}
              expandTrigger='hover'
              placeholder='请选择病区'
              onChange={cityTopConfig.getWard}
            />

            <Select
              style={{ width: 200 }}
              showSearch
              placeholder='登录次数查询'
              optionFilterProp='children'
              onChange={cityTopConfig.getLoginTimeSelectValue}
              filterOption={(input: any, option: any) =>
                (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
              }
              options={topConfigData.topSelectorData}
            />

            <Input
              suffix={<IconSvg onClick={cityTopConfig.inputEnter} name='search' />}
              onChange={cityTopConfig.getInputNamePhoneValue}
              onPressEnter={cityTopConfig.inputEnter}
              placeholder='负责人姓名/手机'
            />
          </Space>
        </Space>
        <div className={style.btnBox}>
          <Button onClick={inpatientWardTopConfig.inpatientWardExport}>
            <IconSvg name='hospitalExport' style={{ marginRight: 7 }} />
            导出
          </Button>
        </div>
      </div>
      <div className={style.bottom}>
        <BottomTable />
      </div>
    </div>
  )
}
